<template>
  <div class="event-card" shadow="hover">
    <el-row class="event-card-main" type="flex" justify="space-between">
      <div class="event-card-content">
        <el-tooltip class="item" effect="dark" :content="getCardNameLabel(card.name)" :disabled="!isCardNameOverflow" placement="top-start">
          <h2 class="event-card-name" ref="parentNameWidth">
            <span ref="childNameWidth">{{ getCardNameLabel(card) }}</span>
          </h2>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="htmlUnEscape(card.description)" :disabled="!isOverflow" placement="top">
          <p class="event-card-desc" ref="parentHeight">
            <span ref="childHeight">{{ htmlUnEscape(card.description) }}</span>
          </p>
        </el-tooltip>

        <div class="event-card-others">
          <div class="event-card-scope">
            <p>
              {{$t('event.setting.additional.component.cardItem.label1')}}：
              <el-dropdown placement="top" @command="openEventFormSetTab">
                <span v-if="rangeName.length > 30">
                  {{$t('event.setting.additional.component.cardItem.des1', {data1:rangeName.substring(0, 30), data2:card.range.length})}}
                </span>
                <span v-else>{{ rangeName }}</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in card.range" :key="index" :command="item.id">{{ item.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </p>
          </div>
          <div class="event-card-li">
            <p>{{$t('common.base.type')}}：<span class="task_type">{{ card.inputType == 'single' ? $t('common.base.onceTime') : $t('common.base.moreTime') }}</span></p>
            <p>{{$t('event.setting.additional.component.cardItem.label2')}}：<span class="pointer" @click="openStatisticsDialog">{{$t('common.base.view')}}</span></p>
          </div>
        </div>
      </div>

      <div class="event-card-setting">
        <el-switch v-model="card.enabled" :active-value="1" :inactive-value="0" @change="statusChange(card.enabled)" />
        <i class="iconfont icon-tuozhuaipaixu drag-icon"></i>
      </div>
    </el-row>

    <!-- start 操作 -->
    <el-row class="event-card-opearte" type="flex">
      <div class="event-card-opearte-more">
        <el-dropdown placement="top">
          <i class="icon-diandiandian iconfont">{{$t('common.base.moreOperator')}}</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div class="opearte_btn" @click="openEditRenameDialog"><i class="iconfont icon-edit-square"></i>{{$t('common.base.rename')}}</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div class="opearte_btn" @click="handleDeleteCard"><i class="iconfont icon-delete"></i>{{$t('common.base.delete')}}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="event-card-opearte-modify" @click="openCardEditTab">
        <i class="icon-edit-square iconfont">{{$t('common.base.edit')}}</i>
      </div>
    </el-row>
    <!-- end 操作 -->
  </div>
</template>

<script>
/* api */
import * as SettingServiceEventApi from '@src/api/SettingServiceEventApi';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { CardNameLabelEnum } from '@model/enum/LabelEnum'

export default {
  name: 'event-card-item',
  props: {
    card: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    rangeName() {
      let range = this.card.range
        .map(item => {
          return item.name;
        })
        .join('，');
      return range;
    },
  },
  data() {
    return {
      isCardNameOverflow: false,
      isOverflow: false,
    };
  },
  methods: {
    // 获取附加组件标题的多语言label
    getCardNameLabel(item) {
      const { name, cardNameLanguage } = item
      const locale = this.$i18n.locale
      return cardNameLanguage?.locale || CardNameLabelEnum[name] || name
    },
    /* 删除附加组件 */
    handleDeleteCard() {
      this.$confirm(this.$t('event.setting.additional.component.cardItem.tips1', {data1:this.card.name}), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(async () => {
        const result = await SettingServiceEventApi.deleteCard({ id: this.card.id });
        if (!result?.succ) return this.$message.error(result?.message);
        
        this.$message.success(this.$t('common.base.tip.deleteSuccess'));
        this.$emit('update');
      });
    },
    /* 禁用/开启附加组件 */
    async statusChange(state) {
      try {
        let enabled = state ? 1 : 0;

        const res = await SettingServiceEventApi.setCardStatus({id: this.card.id, enabled});
        if (!res?.succ) return this.$message.error(res?.message);

        this.$message.success(this.$t('common.base.tip.operationSuccess'));
      } catch(err) {
        console.error('事件附加组件启禁用操作失败');
      }
    },
    /* 打开重命名弹窗组件 */
    openEditRenameDialog() {
      this.$emit('edit', this.card);
    },
    /* 打开事件流程设置页面 */
    openEventFormSetTab(id) {
      // this.$platform.openTab({
      //   id: 'service_event_flow_setting',
      //   title: '事件流程设置',
      //   url: `/setting/serviceStation/eventForm?serviceEventTypeId=${id}`,
      //   reload: true,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageEventFlowSetting,
        // titleKey: this.$t('event.setting.additional.component.cardItem.title1'),
        params: `serviceEventTypeId=${id}`,
        reload: true,
      })
    },
    /* 打开编辑附加组件页面 */
    openCardEditTab() {
      let fromId = window.frameElement.getAttribute('id');
      let cardId = this.card.id;

      // this.$platform.openTab({
      //   id: 'event_card_setting',
      //   title: '附加组件表单设置',
      //   close: true,
      //   reload: true,
      //   url: `/setting/serviceStation/card/view?cardId=${cardId}`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageEventCardSetting,
        params: `cardId=${cardId}`,
        reload: true,
        fromId
      })
    },
    /* 打开附加组件统计弹窗 */
    openStatisticsDialog() {
      this.$emit('statistics', this.card);
    },
    /* 初始化溢出tips */
    initOverflow() {
      this.$nextTick(() => {
        this.isCardNameOverflow = this.$refs?.parentNameWidth?.offsetWidth < this.$refs?.childNameWidth?.offsetWidth;
        this.isOverflow = this.$refs?.parentHeight?.offsetWidth < this.$refs?.childHeight?.offsetWidth;
      });
    },
    htmlUnEscape(value) {
      if (!value) return '';
      return value.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    },
  },
  watch: {
    card: {
      handler(newValue) {
        if (newValue) this.initOverflow();
      },
      immediate: true
    },
  },
};
</script>

<style lang="scss">
.event-card {
  width: 358px;
  height: 178px;
  background: #ffffff;
  border-radius: $button-radius-base;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
  &:hover {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
  }

  &-main {
    height: calc(100% - 32px);
    padding: 16px 20px;

    .event-card-content {
      min-width: 0;

      .event-card-name {
        line-height: 22px;
        margin-bottom: 0;
        padding-right: 32px;
        font-size: $font-size-large;
        @include text-ellipsis;
      }

      .event-card-desc {
        height: 17px;
        line-height: 17px;
        margin: 8px 0 12px;
        font-size: $font-size-small;
        color: $text-color-regular;
        @include text-ellipsis;
      }

      .event-card-others {
        p {
          margin-bottom: 4px;
          font-size: $font-size-small;
          color: $text-color-regular;
          span {
            color: $color-primary;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }

        .event-card-scope {
          margin-bottom: 8px;

          p {
            @include text-ellipsis-2();

            span {
              font-size: $font-size-small;
            }
          }

          .el-dropdown {
            line-height: 15px;
            display: inline;
            cursor: pointer;
          }
        }

        .event-card-li {
          display: flex;
          justify-content: flex-start;
          p {
            width: 86px;

            .task_type {
              color: $text-color-primary;
            }
          }
        }
      }
    }

    .event-card-setting {
      text-align: right;
    }

    .drag-icon {
      margin-top: 24px;
      font-weight: 600;
      font-size: $font-size-base;
      color: $text-color-regular;
      display: none;
    }
    
    &:hover {
      cursor: move;
      .drag-icon {
        display: block !important;
      }
    }
  }

  .event-card-opearte {
    height: 32px;
    line-height: 32px;
    border-top: 1px solid $bg-color-l1;

    & > div {
      cursor: pointer;
      flex: 1;
      text-align: center;

      &:first-child {
        border-right: 1px solid $bg-color-l1;
      }

      i {
        font-size: $font-size-small;
        color: $text-color-secondary;
        &:hover {
          color: $color-primary;
        }
        &::before {
          margin-right: 8px;
        }
      }
    }
  }
}

.el-dropdown-menu {
  .opearte_btn {
    .iconfont {
      margin-right: 10px;
      font-size: $font-size-base;
    }
  }
}

@media screen and (max-width: 3000px) {
  .event-card {
    width: calc(100% / 6 - 12px);
  }
}
@media screen and (max-width: 2400px) {
  .event-card {
    width: calc(100% / 5 - 12px);
  }
}
@media screen and (max-width: 1925px) {
  .event-card {
    width: calc(100% / 4 - 12px);
  }
}
@media screen and (max-width: 1500px) {
  .event-card {
    width: calc(100% / 3 - 12px);
  }
}
@media screen and (max-width: 1200px) {
  .event-card {
    width: calc(100% / 2 - 12px);
  }
}
@media screen and (max-width: 900px) {
  .event-card {
    width: calc(100% - 12px);
  }
}
</style>
